/**
 * 使用path的resolve进行拼接绝对路径
 * */

const {
  resolve
} = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口
  entry: ["./src/js/index.js", "./src/html/index.html"],
  // 输出
  output: {
    // 输出文件名
    filename: "main.js",
    // 路径
    path: resolve(__dirname, "build"),
  },
  // loader
  module: {
    rules: [{
      oneOf: [{
          // 匹配哪些文件
          test: /\.css$/,
          // 使用哪些loader进行处理
          use: [
            // 从下到上进行执行
            "style-loader",
            "css-loader",
          ],
        },
        // less文件打包
        {
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        },
        // 处理图片
        {
          test: /\.(jpg|png|gif)$/,
          loader: 'url-loader',
          options: {
            // 文件大小限制，超过100kb的文件将会被打包，反之会被转化为base64格式
            limit: 100 * 1024,
            // name: '[name][hash:16].[ext]',
            esModule: false,
            // outputPath: '/img'
          },
          type: 'javascript/auto',
        },
        // 处理html文件当中的图片
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        // 处理其他资源
        {
          exclude: /\.(css|js|html|less)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            esModule: false,
          },
          type: 'javascript/auto',
        },
      ],
    }],
  },
  plugins: [
    // 1、默认的html文件
    // new HtmlWebpackPlugin(),
    // 2、自定义内容
    // new HtmlWebpackPlugin({
    //     title:"this is title"
    // })
    // 3、使用模板
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    })
  ],
  // 模式 （开发、生产）
  mode: "development",
  devServer: {
    // contentBase: resolve(__dirname, 'build'),
    static: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    hot: true
  },
  devtool: 'source-map'
};